﻿@using Lari.Services.ViewModel
@using Lari.Configuration;
@model RoleModel

@using (Html.BeginForm())
{
    <div id="pagetitle">
        <h1>@ScreenName.Users.RoleEdit</h1>
    </div>
    <div class="spacer">
    </div>
    <div id="pagecontent">
        <table style="border-collapse: collapse; width: 100%">
            <tr>
                <td id="leftColumn" style="width: 40%">
                    <div class="spacer">
                    </div>
                    <div>
                        <label class="required">
                            Role</label>
                    </div>
                    <div>
                        @Html.TextBoxFor(m => m.Name)
                        @Html.ValidationMessageFor(m => m.Name)
                        @Html.HiddenFor(m => m.Id)
                    </div>
                    <div class="spacer">
                    </div>
                    <div>
                        <input type="submit" value="@GuiActionName.Update" id="btnUpdate" />
                    </div>
                    <div class="doubleSpacer">
                    </div>
                    <div>
                        @Html.ActionLink(ScreenName.Users.Role, ActionConst.Users.RoleList)
                    </div>
                    <div class="spacer">
                    </div>
                    <div>
                        @Html.ActionLink(ScreenName.Users.NewRole, ActionConst.Users.NewRole)
                    </div>
                </td>
                <td id="centerColumn">
                    <div style="float: left">@Html.CheckBoxFor(m => m.SelectAllAccess)Select/Unselece all</div>
                    
                    <div style="float: right">
                        <a href="#" id="expand" class="expanded">Expand</a>&nbsp;&nbsp;<a href="#" id="collapse" class="collapsed">Collapse</a>
                    </div>
                    <div class="clear"></div>
                    <div class="doubleSpacer"></div>

                    <ul class="treeView" id="TreeView">
                        @for (int i = 0; i < Model.Modules.Count; i++)
                        {
                            <li class="collapsed">
                                <div style="float: left">
                                    @Model.Modules[i].Name
                                    @Html.HiddenFor(m => m.Modules[i].Name)
                                    @Html.HiddenFor(m => m.Modules[i].Id)
                                </div>
                                <div style="float: right; padding-right: 10px">
                                    @Html.CheckBoxFor(m => m.Modules[i].SelectAccess) Select/Unselect
                                </div>
                                <ul>
                                    @for (int j = 0; j < Model.Modules[i].Accesses.Count; j++)
                                    {
                                        <li>
                                            @Html.CheckBoxFor(m => m.Modules[i].Accesses[j].HasAccess)
                                            @Html.HiddenFor(m => m.Modules[i].Accesses[j].Name)
                                            @Model.Modules[i].Accesses[j].Name
                                            @Html.HiddenFor(m => m.Modules[i].Accesses[j].Id)
                                        </li>
                                    }
                                </ul>
                            </li>
                        }
                    </ul>
                    @* <div id="accordion">
                        @for (int i = 0; i < Model.Modules.Count; i++)
                        {
                            <h5>
                                <a href="#">@Model.Modules[i].Name</a>
                                
                                @Html.HiddenFor(m => m.Modules[i].Name) 
                                @Html.HiddenFor(m => m.Modules[i].Id)</h5>
                           
                            <div style="height: 400px;">
                                @for (int j = 0; j < Model.Modules[i].Accesses.Count; j++)
                                {
                                    if (j == 0)
                                    {
                                         <div style="border-top: 1px solid #aed0ea; float: right; padding-top: 0px; padding-bottom: 2px">
                                             @Html.CheckBoxFor(m => m.Modules[i].SelectAccess) Select/Unselect all
                                        </div>
                                    }   
                                    <div style="border-bottom: 1px solid #aed0ea; ; padding-top: 2px; padding-bottom: 2px">
                                        @Html.CheckBoxFor(m => m.Modules[i].Accesses[j].HasAccess) 
                                        @Html.HiddenFor(m => m.Modules[i].Accesses[j].Name)
                                        @Model.Modules[i].Accesses[j].Name
                                        @Html.HiddenFor(m => m.Modules[i].Accesses[j].Id)
                                      </div>
                                }
                            </div>       
                                     
                                 
                        }
                    </div>*@
                </td>
            </tr>
        </table>
    </div>
  
}
<script type="text/javascript">

    Array.prototype.indexOf = IndexOf;

    //Toggles between two classes for an element
    function ToggleClass(element, firstClass, secondClass, event) {
        event.cancelBubble = true;

        var classes = element.className.split(" ");
        var firstClassIndex = classes.indexOf(firstClass);
        var secondClassIndex = classes.indexOf(secondClass);

        if (firstClassIndex == -1 && secondClassIndex == -1) {
            classes[classes.length] = firstClass;
        }
        else if (firstClassIndex != -1) {
            classes[firstClassIndex] = secondClass;
        }
        else {
            classes[secondClassIndex] = firstClass;
        }

        element.className = classes.join(" ");

    }

    //Finds the index of an item in an array
    function IndexOf(item) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == item) {
                return i;
            }
        }

        return -1;
    }
    function ToggleNodeStateHandler(event) {
        ToggleClass(this, "collapsed", "expanded", (event == null) ? window.event : event);
    }

    //Prevents the onclick event from bubbling up to parent elements
    function PreventBubbleHandler(event) {
        if (!event) event = window.event;
        event.cancelBubble = true;
    }

    //Adds the relevant onclick handlers for the nodes in the tree view
    function SetupTreeView(elementId) {

        var tree = document.getElementById(elementId);

        var treeElements = tree.getElementsByTagName("li");

        for (var i = 0; i < treeElements.length; i++) {
            if (treeElements[i].getElementsByTagName("ul").length > 0) {
                treeElements[i].onclick = ToggleNodeStateHandler;
                //alert("1");
            }
            else {
                treeElements[i].onclick = PreventBubbleHandler;
                //alert("2");
            }
        }
    }
    function ExpandTree(expand) {
        var finalclass;

        if (expand) {
            finalclass = "expanded";
        } else {
            finalclass = "collapsed";
        }

        $("#TreeView > li").each(function () {
            $(this).attr('class', finalclass);
        });
    }
    
    
    
    $(document).ready(function () {

        SetupTreeView('TreeView');

        $("#expand").click(function () {
            ExpandTree(true);
        });

        $("#collapse").click(function () {
            ExpandTree(false);
        });
        
        $("#btnUpdate").button();
        

        $("#SelectAllAccess").click(function () {

            var current = $(this).is(':checked');
            $("INPUT[type='checkbox']").each(function () {
                $(this).prop("checked", current);
            });
        });
        $("INPUT[name^='Modules[']").filter("[id$=SelectAccess]").click(function () {

            var currentmoduleIndex = $(this).attr('name').replace("].SelectAccess", "").replace("Modules[", "");
            var moduleSelectstatus = $(this).is(':checked');

            $("input[name^='Modules[" + currentmoduleIndex + "']").filter("[id$=HasAccess]").each(function () {
                $(this).prop("checked", moduleSelectstatus);
            });

        });



        //        $("INPUT[name^='Modules[']").filter("[id$=SelectAccess]").click(function () {
        //            var current = $(this).attr('name').replace("].SelectAccess", "").replace("Modules[","");  
        //            alert(current);
        //            var sel = "INPUT[name^=Modules[" + current + "]";
        //            alert(sel);
        //            $(sel).each(function () {
        //                alert("hi");
        //            });

        //        });


        //        var checkedstring = "";
        //filter("[id$=HasAccess]")
        //        $("input[name^='chk_access_']:checked").each(function () {

        //            checkedstring = checkedstring + $(this).attr('name').replace("chk_access_", "") + ",";
        //            $('#selectedAccess').val(checkedstring);

        //        });

        //        $("INPUT[type='checkbox']")   .click(function () {

        //            var thisCheck = $(this);
        //            var currentName = $(this).attr('name').replace("chk_access_", "");

        //            if (thisCheck.is(':checked')) {
        //                checkedstring = checkedstring + currentName + ",";

        //            }
        //            else {
        //                checkedstring = checkedstring.replace(currentName + ",", "");
        //            }
        //            $('#selectedAccess').val(checkedstring);
        //        });

    });
</script>
